"use client";
import React from "react";
import {Button, Input, Checkbox, Link} from "@nextui-org/react";
import {Icon} from "@iconify/react";
import DefaultLayout from "@/layouts/default.tsx";

export default function RegisterPage() {
    const [isVisible, setIsVisible] = React.useState(false);
    const [isConfirmVisible, setIsConfirmVisible] = React.useState(false);

    const toggleVisibility = () => setIsVisible(!isVisible);
    const toggleConfirmVisibility = () => setIsConfirmVisible(!isConfirmVisible);

    return (
        <DefaultLayout>
            <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
                <div className="flex h-full w-full items-center justify-center">
                    <div className="flex w-full max-w-sm flex-col gap-4 rounded-large px-8 pb-10 pt-6">
                        <p className="pb-4 text-left text-3xl font-semibold">
                            注 册
                            <span aria-label="emoji" className="ml-2" role="img">
            👋
          </span>
                        </p>
                        <form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
                            <Input
                                isRequired
                                label="用户名"
                                labelPlacement="outside"
                                name="username"
                                placeholder="填写您的用户名"
                                type="text"
                                variant="bordered"
                            />
                            <Input
                                isRequired
                                label="邮箱"
                                labelPlacement="outside"
                                name="email"
                                placeholder="填写您的邮箱"
                                type="email"
                                variant="bordered"
                            />
                            <Input
                                isRequired
                                endContent={
                                    <button type="button" onClick={toggleVisibility}>
                                        {isVisible ? (
                                            <Icon
                                                className="pointer-events-none text-2xl text-default-400"
                                                icon="solar:eye-closed-linear"
                                            />
                                        ) : (
                                            <Icon
                                                className="pointer-events-none text-2xl text-default-400"
                                                icon="solar:eye-bold"
                                            />
                                        )}
                                    </button>
                                }
                                label="密码"
                                labelPlacement="outside"
                                name="password"
                                placeholder="填写您的密码"
                                type={isVisible ? "text" : "password"}
                                variant="bordered"
                            />
                            <Input
                                isRequired
                                endContent={
                                    <button type="button" onClick={toggleConfirmVisibility}>
                                        {isConfirmVisible ? (
                                            <Icon
                                                className="pointer-events-none text-2xl text-default-400"
                                                icon="solar:eye-closed-linear"
                                            />
                                        ) : (
                                            <Icon
                                                className="pointer-events-none text-2xl text-default-400"
                                                icon="solar:eye-bold"
                                            />
                                        )}
                                    </button>
                                }
                                label="确认密码"
                                labelPlacement="outside"
                                name="confirmPassword"
                                placeholder="再次填写您的密码"
                                type={isConfirmVisible ? "text" : "password"}
                                variant="bordered"
                            />
                            <Checkbox isRequired className="py-4" size="sm">
                                我同意以下：&nbsp;
                                <Link href="#" size="sm">
                                    条款
                                </Link>
                                &nbsp; 和&nbsp;
                                <Link href="#" size="sm">
                                    服务
                                </Link>
                            </Checkbox>
                            <Button color="primary" type="submit">
                                注 册
                            </Button>
                        </form>
                        <p className="text-center text-small">
                            <Link href="/login" size="sm">
                                已有账号? 登录
                            </Link>
                        </p>
                    </div>
                </div>
            </section>
        </DefaultLayout>
    );
}